<template>
    <div class="list">
        <div class="bread">
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>平台动态</el-breadcrumb-item
                >
            </el-breadcrumb>
        </div>
        <div class="content">
            <el-table class="bidTable" v-loading="loading" style="width: 100%" :data="policylawList" height="70vh"
                :header-cell-style="{
                    background: '#F6FDFD', height: '46px', color: '#000000', border: '0px solid tan', boxShadow: 'inset 0px -1px 0px 0px #EEEEEE'
                }" :row-style="{ height: '50px' }" @row-click="handleTableRow">
                <el-table-column label="序号" align="center" type="index" width="150"></el-table-column>
                <el-table-column label="平台动态标题" align="center" prop="title" />
                <el-table-column label="发布时间" align="center" prop="publishDatetime">
                    <template #default="scope">
                        <span>{{ parseTime(scope.row.publishDatetime, '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div ref="mobileList" class="mobileList">
                <div class="mobile_item" v-for="(item, index) in policylawList" :key="index"
                    @click="handleTableRow(item)">
                    <h4>{{ item.title }}</h4>
                    <span>{{ parseTime(item.publishDatetime, '{y}-{m}-{d}') }}</span>
                    <el-divider></el-divider>
                </div>
            </div>
            <pagination class="bidPagination" v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model::limit="queryParams.pageSize" @pagination="getList" />
        </div>

    </div>
</template>

<script>
import { listPolicylaw } from '@/api/bid/policylaw'

export default {
    name: "list",
    data() {
        return {
            loading: true,
            // 总条数
            total: 0,
            policylawList: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
            },
            headerCellClassName: 'headerClass'
        }
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            const that = this
            this.loading = true
            listPolicylaw(this.queryParams).then(response => {
                this.policylawList = response.rows
                this.total = response.total
                this.loading = false
            })
        },
        handleTableRow(row) {
            this.$router.push(`/platform/detail?id=${row.id}`)
        },

    }
}
</script>

<style lang="scss" scoped>
.bread {
    display: flex;
    line-height: 20px;
    padding: 10px 20px 20px;
}

.list {
    .breadcrumb {
        height: 21px;
        font-family: MicrosoftYaHei, sans-serif;
        font-size: 14px;
        font-weight: normal;
        line-height: 21px;
        letter-spacing: 0em;
        margin-left: 30px;
        margin-top: 20px;
    }

    .content {
        margin: 14px 30px 44px 30px;
        background: #FFFFFF;
        border-radius: 10px;
        opacity: 1;
        min-height: 860px;
        padding: 24px 21px 0 21px;
    }
}

.headerClass {

    background: #F6FDFD;

    box-shadow: inset 0px -1px 0px 0px #EEEEEE;
}

::v-deep .pagination-container .el-pagination {
    text-align: center;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    position: relative;
}

::v-deep .el-pager li.active {

    cursor: default;
    font-family: MicrosoftYaHei, sans-serif;
    font-size: 12px;
    font-weight: normal;

    letter-spacing: 0em;
    color: #1DD0B7;
}

.mobileList {
    display: none;
}

.mobile_item {
    h4 {
        color: #000000;
        font-weight: 900;
        text-align: left;
        margin: 3px 0 8px;
    }

    span {
        display: flex;
        justify-content: left;
        color: #999999;
        margin: 3px;
    }
}

@media screen and (max-width: 767px) {
    .mobileList {
        display: block;
    }

    .bidTable,
    .bidPagination {
        display: none;
    }

    .list {}
}
</style>
